<template>
	<view class="order-title">
		<view class="timer">
			{{msg}}
		</view>

		<view class="film-title">
			<view class="film-poster">
				<image :src="filmData.Imageurl" mode=""></image>
			</view>
			<view class="film-text">
				<view class="film-name">
					<text>{{filmData.filmName}}</text>
					<text>{{seatList.length}}张</text>
				</view>
				<view class="film-time">
					<text>{{filmData.week}} {{filmData.date}}
						{{filmData.start}}-{{filmData.end}}({{filmData.ShowType}})</text>
				</view>
				<view class="film-screen">
					<text>{{filmData.ScreenName}}</text>
				</view>
				<view class="film-seats">
					<text v-for="(item,index) in seatList" :key="index">{{item}}</text>

				</view>
			</view>
		</view>
		<view class="ticket-tips">
			<view class="ticket-tips-info" v-for="(item,index) in buyTicketRemind" :key='index'>
				<van-icon name="close" />
				<text>{{item}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: ['msg'],
		data() {
			return {
				filmData: {},
				seatList: [],
				buyTicketRemind: ''

			};
		},
		created() {
			this.filmData = this.$store.state.sessionInfo
			this.seatList = this.$store.state.sessionSeatList
			this.buyTicketRemind = this.$store.state.cinemaConfig.buyTicketRemind.split('\n')

		},


	}
</script>

<style lang="scss">
	.timer {
		width: 100vw;
		text-align: center;
		height: 260rpx;
		color: #fff;
		line-height: 70rpx;
		background-image: linear-gradient(to right, #fb97a0, #FB5868);
	}

	.order-title {
		margin-top: 10vh;
	}

	.film-title {
		display: flex;
		background-color: #fff;
		padding: 30rpx;
		width: 90vw;
		margin: -200rpx auto 0 auto;
		border-radius: 15rpx;

		.film-poster {
			image {
				width: 170rpx;
				height: 220rpx;
				border-radius: 15rpx;
			}
		}

		.film-text {
			margin-left: 25rpx;

			.film-name {
				font-size: 30rpx;

				text:last-child {
					margin-left: 20rpx;
					font-size: 26rpx;
				}
			}

			.film-time {
				margin-top: 20rpx;
				font-size: 26rpx;
			}

			.film-screen {
				font-size: 26rpx;
				margin-top: 25rpx;
			}

			.film-seats {
				margin-top: 15rpx;
				font-size: 26rpx;

				text {
					margin-right: 15rpx;
				}
			}
		}
	}

	.ticket-tips {
		// display: flex;
		// align-items: center;
		width: 90vw;
		margin: 0 auto;
		border-radius: 15rpx;
		background-color: rgba(251, 176, 182, 0.2);
		padding: 15rpx 30rpx;

		.ticket-tips-info {
			font-size: 26rpx;
			color: #FB5868;
			margin: 0 15rpx 10rpx 15rpx;
		}
	}
</style>